<template>
  <div>
    <!-- 自定义导航栏 -->
    <gh-navbar id="navbar" :showback="true" title="律师主页" />
    <div class="detail">
      <!-- 律师卡片 -->
      <view class="swiper-item">
        <view class="swiper-user">
          <div class="info-box">
            <view class="user-avatar">
              <image :src="item.avatar" mode="scaleToFill" />
              <!-- 头像 -->
            </view>
            <div class="user-info">
              <div class="name">
                <div class="user-name">{{item.name}}</div>
                <!-- 名字 -->
              </div>
              <div class="user-company">{{item.company}}</div>
              <!-- 公司 -->
            </div>
          </div>
          <div
            class="offline-btn"
            :class="{'flowed-btn': item.flow_status}"
            @click="handleFlow"
          >{{item.flow_status ? '已关注' : '关注'}}</div>
        </view>
        <div class="swiper-container">
          <div class="swiper-content">
            <div class="law-tag-box">
              <!-- 问题标签 -->
              <div
                class="law-tag"
                v-for="(itemLawTag, lawTagIndex) in item.lawTag"
                :key="lawTagIndex"
              >{{itemLawTag}}</div>
            </div>
            <div class="content-hybrid">
              <div class="haoping">
                <text>{{item.haoping}}</text>
                <view>好评数</view>
              </div>
              <div class="line"></div>
              <div class="huifu">
                <text>{{item.haoping}}</text>
                <view>回复数</view>
              </div>
            </div>
          </div>
        </div>
      </view>
      <!-- /律师卡片 -->
      <div class="tab-box">
        <div class="tab" :class="{active: tabIndex === 0}" @click="tabIndex = 0">服务介绍</div>
        <div class="tab" :class="{active: tabIndex === 1}" @click="tabIndex = 1">律师信息</div>
      </div>
      <template v-if="tabIndex === 0">
        <div class="title">服务类型</div>
        <div class="cate-box">
          <navigator
            :url="item.url"
            class="cate-item"
            v-for="(item, index) in menuList"
            :key="index"
          >
            <text class="iconfont" :class="item.icon"></text>
            <div class="cate-title">{{item.title}}</div>
            <div class="charge">{{item.money}}</div>
          </navigator>
        </div>
        <div class="title">服务记录（{{item.total_order}}条）</div>
        <div class="record">
          <div class="record-item" v-for="(item, index) in record" :key="index">
            <div class="record-content">完成了一个{{item.main_title}}方面的订单</div>
            <div class="record-time">{{item.end_complete_time}}</div>
          </div>
        </div>
        <div class="title">用户评价</div>
        <div class="comment">
          <div class="comment-item" :id="commentItem.id" v-for="(commentItem) in comment" :key="commentItem.id">
            <div class="rate">
              <!-- 评分组件 -->
              <uni-rate
                :disabled="true"
                :value="commentItem.score"
                size="15"
                active-color="#fea388"
                margin="5"
              ></uni-rate>
            </div>
            <div class="comment-content">{{commentItem.score_content}}</div>
            <div class="comment-hybrid">
              <div class="phone">{{commentItem.mobile}}</div>
              <div class="time">{{commentItem.score_time}}</div>
            </div>
          </div>
        </div>
      </template>
      <!-- 律师信息 -->
      <template v-if="tabIndex === 1">
        <div class="title">律师信息</div>
        <div class="lawer-box">
          <div class="diqu">执业地区：{{item.city}}</div>
          <div class="diqu">执业证号：{{item.certificate_no}}</div>
          <div class="diqu">执业单位：{{item.company}}</div>
          <div class="diqu">办公地址：{{item.office_address}}</div>
        </div>
        <div class="title">个人简历</div>
        <div class="lawer-box">
          <text>{{item.resume}}</text>
        </div>
      </template>
    </div>
    <div class="pagination" v-show="tabIndex === 0">
      <uni-pagination
        title
        show-icon="true"
        pageSize="5"
        :total="commentCount"
        current="1"
        @change="handleChangePage"
      ></uni-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      item: {
        id: 0,
        status: "0", // true 在线
        avatar: "https://s1.ax1x.com/2020/04/16/Jk7C8O.jpg",
        name: "gauhar",
        company: "广东天杰律师事务所", //公司名称
        lawTag: ["婚姻家庭", "合同纠纷", "刑事辩护", "债权债务"], // 主分类
        huifu: "999+",
        haoping: "999+",
        flow_status: false, //关注状态
        city: "", //办公城市
        resume: "", //个人简介
        office_address: "", //办公地址
        certificate_no: "", // 执业证号
        total_order: ""
      },
      record: [],
      tabIndex: 0, // 当前选择的tab
      comment: [],
      menuList: [], // 服务类型，在线咨询，电话。。。
      commentCount: 0 // 评论数据总数量
    };
  },
  async onLoad(e) {
    const res = await this.$gh.request("member.index", {
      data: {
        op: "getLawyerHome",
        lawyer_id: e.id
      }
    }).catch((err) => {
      if(err.code == 41009){
        this.$store.dispatch('login')
      }
    })
    const comment = await this.$gh.request("member.index", {
      data: {
        op: "getLawyerEvaluate",
        lawyer_id: e.id,
        page: 1,
        psize: 5
      }
    }).catch((err) => {
      if(err.code == 201){
        this.$store.dispatch('modal','暂时没有该律师的数据').finally(() => {
          uni.navigateBack({
             delta: 1
          });
        })
      }
    })
    this.comment = comment.data.list;
    this.commentCount = comment.data.count > 100 ? 100 : comment.data.count;
    let {
      id,
      avatar,
      affiliated_company,
      reply_realname,
      online_status,
      main_category,
      reply_total,
      praise_total,
      lawyer_status,
      order,
      city,
      resume,
      office_address,
      certificate_no,
      total_order,
      sys_online, //在线咨询设置
      sys_telephone, //电话咨询设置
      sys_contract, //合同起草设置
      sys_lawyer_letter, //律师函设置
      sys_adviser //私人顾问设置
    } = res.data.list[0];
    let item = {
      id,
      status: online_status, // true 在线
      avatar, // 头像
      name: reply_realname, // 名字
      company: affiliated_company, // 公司
      lawTag: main_category, // 主分类
      huifu: reply_total > 999 ? "999+" : reply_total, // 回复数
      haoping: praise_total > 999 ? "999+" : praise_total, // 好评数
      flow_status: lawyer_status, // 关注状态
      city, //办公城市
      resume, //个人简介
      office_address, //办公地址
      certificate_no, // 执业证号
      total_order // 服务记录总数量
    };
    // 如果律师离线
    if(online_status == '0'){
      this.$store.dispatch('modal', '律师处于离线状态！').finally(() => {
        uni.navigateBack({
           delta: 1
        });
      })
    }
    // 律师信息
    this.item = item;
    // 服务记录
    this.record = order;
    // 重新编写对象里面的内容，达到我想要的数据
    sys_online.title = "在线咨询";
    sys_online.url = `/pageIndex/menu/questionConsulting?serve=2&id=${id}`;
    sys_online.icon = "icon-zixun-tousu";

    sys_telephone.title = "电话咨询";
    sys_telephone.url = `/pageIndex/menu/telephoneCounseling?serve=2&lid=${id}`;
    sys_telephone.icon = "icon-whatsapp";

    // sys_contract.title = "私人顾问";
    // sys_contract.url = `/pageIndex/menu/privateConsultant?serve=2&lid=${id}`;
    // sys_contract.icon = "icon-wodeguwen";
    sys_adviser.title = "私人顾问";
    sys_adviser.url = `/pageIndex/menu/privateConsultant?serve=2&lid=${id}`;
    sys_adviser.icon = "icon-wodeguwen";

    sys_lawyer_letter.title = "律师函";
    sys_lawyer_letter.url = `/pageIndex/menu/lawyerLetter?serve=2&id=${id}`;
    sys_lawyer_letter.icon = "icon-lvshihan1";

    sys_contract.title = "合同起草";
    sys_contract.url = `/pageIndex/menu/draft?serve=2&id=${id}`;
    sys_contract.icon = "icon-hetong";
    // 服务类型
    this.menuList = [
      sys_online,
      sys_telephone,
      sys_contract,
      sys_lawyer_letter,
      sys_adviser
    ];
    // 筛选出律师对应的服务类型
    this.menuList = this.menuList.filter((item) => {
      return item.status
    })
    // 价钱
    this.menuList.forEach((element, index) => {
      const danwei = element.time_unit == "minute" ? "分钟" : "天";
      element.money =
        "￥" + element.charge + "/" + element.duration + danwei;
    });
  },
  methods: {
    async handleChangePage(e) {
      // 分页加载
      const comment = await this.$gh.request("member.index", {
        data: {
          op: "getLawyerEvaluate",
          lawyer_id: this.item.id,
          page: e.current,
          psize: 5
        }
      })
      this.comment = comment.data.list
    },
    async handleFlow() {
      const res = await this.$gh.request("member.info", {
        data: {
          op: "addFollow",
          follow_id: this.item.id
        }
      });
      if (res.code == 200) {
        this.item.flow_status = !this.item.flow_status;
        const title = this.item.flow_status ? "关注成功" : "取消关注成功";
        uni.showToast({
          mask: true,
          icon: "success",
          title,
          duration: 2000
        });
      } else {
        uni.showToast({
          mask: true,
          icon: "none",
          title: "关注的律师不存在",
          duration: 2000
        });
      }
    }
  }
};
</script>
<style lang='less' scoped>
// 引入工具less
@import "@/common/util.less";
.detail {
  padding: 30rpx 25rpx;
  .swiper-item {
    // width: 90%;
    margin-right: 23rpx;
    box-shadow: @shadow;
    padding: 16rpx;
    border-radius: 25rpx;
    background-color: #fff;
    .swiper-user {
      .gh-between();
      padding-bottom: 16rpx;
      .info-box {
        .flex();
        .user-avatar {
          image {
            width: 90rpx;
            height: 90rpx;
            border-radius: 50%;
          }
        }
        .user-info {
          padding-left: 22rpx;
          .name {
            display: flex;
            color: #6c76a7;
            .user-name {
              font-size: 32rpx;
              margin-right: 8rpx;
            }
          }
          .user-company {
            font-size: 24rpx;
            color: #abb2ce;
            letter-spacing: 4rpx;
          }
        }
      }
      .offline-btn {
        .gh-center();
        width: 120rpx;
        height: 50rpx;
        border-radius: 40rpx;
        background-color: #fea388;
        font-size: 28rpx;
        color: #fff;
      }
      .flowed-btn {
        background-color: #d1d1d1;
      }
    }
    .swiper-container {
      display: flex;
      .swiper-content {
        flex: 1;
        margin-left: 115rpx;
        .law-tag-box {
          .flex();
          flex-wrap: wrap;
          .law-tag {
            .gh-center();
            width: calc(30% - 30rpx);
            font-size: 24rpx;
            color: #6c76a7;
            padding: 5rpx 10rpx;
            border: 1px solid #6c76a7;
            border-radius: 25rpx;
            margin-bottom: 10rpx;
            margin-right: 5%;
            &:nth-child(3n){
              margin-right: 0;
            }
          }
        }
      }
      .content-hybrid {
        width: 80%;
        margin: 10rpx auto;
        font-size: 26rpx;
        color: @deep-color;
        text-align: center;
        .flex();
        text {
          font-size: 30rpx;
          color: #fea388;
          margin-bottom: 15rpx;
        }
        .line {
          width: 2rpx;
          height: 50rpx;
          background-color: @font-color;
          margin: 0 80rpx;
        }
      }
    }
  }
  .tab-box {
    .gh-center();
    margin: 45rpx auto;
    .tab {
      .gh-center();
      height: 65rpx;
      font-size: 30rpx;
      color: @font-color;
      background-color: #eaf0fe;
      padding: 0 20rpx;
      &:first-child {
        border-top-left-radius: 10rpx;
      }
      &:last-child {
        border-top-right-radius: 10rpx;
      }
    }
    .active {
      font-size: 34rpx;
      color: #fff;
      background-color: @theme-color;
    }
  }
  .title {
    font-size: 36rpx;
    color: @deep-color;
  }
  .cate-box {
    margin-top: 40rpx;
    .flex();
    flex-wrap: wrap;
    .cate-item {
      width: 31%;
      padding: 30rpx 0;
      margin-right: 2.3%;
      margin-bottom: 25rpx;
      text-align: center;
      background-color: #fff;
      border-radius: 25rpx;
      box-shadow: @shadow;
      &:nth-child(3n) {
        margin-right: 0;
      }
      .iconfont {
        font-size: 100rpx;
        color: @theme-color;
      }
      .icon-whatsapp {
        font-size: 90rpx;
      }
      .icon-lvshihan1 {
        font-size: 65rpx;
      }
      .icon-hetong {
        font-size: 80rpx;
      }
      .icon-wodeguwen {
        font-size: 69rpx;
      }
      .cate-title {
        font-size: 30rpx;
        color: @deep-color;
        margin: 10rpx 0;
      }
      .charge {
        font-size: 26rpx;
        color: @font-color;
      }
    }
  }
  .record {
    margin: 30rpx 0;
    border-radius: 20rpx;
    background-color: #eaf0fe;
    .record-item {
      padding: 15rpx 25rpx;
      border-bottom: 1px solid #fff;
      .gh-between();
      .record-content {
        font-size: 30rpx;
        color: @deep-color;
      }
      .record-time {
        font-size: 26rpx;
        color: @font-color;
      }
    }
  }
  .comment {
    margin-top: 25rpx;
    .comment-item {
      padding: 20rpx;
      border-radius: 25rpx;
      background-color: #fff;
      box-shadow: @shadow;
      margin-bottom: 25rpx;
      &:last-child {
        margin-bottom: 0;
      }
      .rate {
        padding: 20rpx 0;
      }
      .comment-content {
        font-size: 30rpx;
        color: @deep-color;
      }
      .comment-hybrid {
        .flex();
        font-size: 26rpx;
        color: @font-color;
        margin-top: 15rpx;
        .time {
          margin-left: 90rpx;
        }
      }
    }
  }
  .lawer-box {
    padding: 30rpx 25rpx;
    background-color: #eaf0fe;
    border-radius: 20rpx;
    margin: 20rpx 0;
    font-size: 30rpx;
    color: @deep-color;
    .diqu {
      padding-bottom: 10rpx;
      &:last-child {
        padding: 0;
      }
    }
  }
}
.pagination {
  padding: 30rpx 100rpx;
  background-color: #fff;
}
</style>